<template>
    <div class="page-box">
        <div class="flex-left">
            <ChuiShaoShiXiangTongJi ref="leftone" />
            <ChuiShaoManYiDu ref="lefttwo" />
            <NewAnJianList ref="leftthree" />
        </div>
        <div>

        </div>
        <div class="flex-right">
            <JieXiangChuiShaoAnJianTotal ref="rightone" />
            <JieXiangAnJianTypeTotal ref="righttwo" />
            <DepartBanShaoAnJianTotal ref="rightthree" />
        </div>

        <!-- 选择街办 -->
        <div class="postion_reletive">
            <el-select @change="selectStreet" v-model="streetId" :popper-append-to-body="false">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>

            <el-select @change="selectStreet2" v-model="time" :popper-append-to-body="false" style="margin-left: 20px;">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>

</template>
<script>
import ChuiShaoShiXiangTongJi from './components/ChuiShaoShiXiangTongJi'
import ChuiShaoManYiDu from './components/ChuiShaoManYiDu'
import NewAnJianList from './components/NewAnJianList'
import DepartBanShaoAnJianTotal from './components/DepartBanShaoAnJianTotal'
import JieXiangAnJianTypeTotal from './components/JieXiangAnJianTypeTotal'
import JieXiangChuiShaoAnJianTotal from './components/JieXiangChuiShaoAnJianTotal'
import { getDangQianJieDaoList } from "@/api"; //接口
import Bus from "@/untils/bus";

export default {
    data() {
        return {
            options: [
                {
                    value: 0,
                    label: "",
                },
            ],
            options2: [
                {
                    value: 1,
                    label: "月",
                },
                {
                    value: 2,
                    label: "本年",
                },
            ],
            time: 2,
            streetId: "1286564239652724737", //id
            rankingid: "1286564239652724737", //排行榜ID
            jiedaoData: {}
        }
    },
    components: {
        ChuiShaoShiXiangTongJi,
        ChuiShaoManYiDu,
        NewAnJianList,
        DepartBanShaoAnJianTotal,
        JieXiangAnJianTypeTotal,
        JieXiangChuiShaoAnJianTotal
    },
    mounted() {
        this.getViDeviceStreet()
        this.handleEcharts()
    },

    methods: {
        // 街办列表
        async getViDeviceStreet() {
            const res = await getDangQianJieDaoList();
            this.options = res.data;
        },

        // 选择街办,社区
        selectStreet(value) {
            this.rankingid = value;
            this.options.forEach((item) => {
                if (value == item.id) {
                    this.jiedaoData = item
                    Bus.$emit("whistleBlowing", item, this.time);
                }
            });
            this.handleEcharts()
        },

        selectStreet2(value) {
            console.log(value, this.time)
            Bus.$emit("whistleBlowing", this.jiedaoData, this.time);
            this.handleEcharts()
        },
        handleEcharts() {
            let obj = { streetId: this.streetId, type: this.time }
            this.$refs.leftone.getData(obj)
            this.$refs.lefttwo.loadEcharts(obj)
            this.$refs.leftthree.getList(obj)
            this.$refs.rightone.loadEcharts(obj)
            this.$refs.righttwo.loadEcharts(obj)
            this.$refs.rightthree.loadEcharts(obj)

        }
    }
}
</script>
<style lang="less" scoped>
.postion_reletive {
    width: 500px;
    position: relative;
    left: 550px;
    top: 0px;
    display: flex;
    height: auto;
    align-items: flex-start;

    /deep/ .el-input__inner {
        padding-left: 20px;
        width: 200px;
        height: 44px;
        background: rgba(4, 11, 32, 0.7);
        border: 1px solid #16d0ff;
        box-shadow: 0px 0px 19px 1px #173c90;
        border-radius: 8px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        opacity: 0.7;
    }

    /deep/ .el-select-dropdown {
        position: relative !important;
        top: 0 !important;
    }

    // /deep/ .el-icon-arrow-up:before {
    //   content: "";
    //   background: url("../../assets/images/yingpanshidian/sanjiao.png") center center no-repeat;
    //   background-size: 10px 8px;
    //   position: absolute;
    //   width: 100%;
    //   height: 100%;
    //   top: 50%;
    //   left: 80%;
    //   transform: translate(-80%, -50%) rotate(180deg);
    // }
}

/deep/.el-scrollbar {
    // min-height: 450px;

    .el-select-dropdown__wrap {
        // min-height: 450px;
    }

    .el-scrollbar__bar {
        display: none;
    }

    ::-webkit-scrollbar-track {
        display: none;
    }
}
</style>